﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_well.cshtml";
    ViewBag.Title = "智能模块";
}

<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div class="row">
                <div class="col-sm-1" style="margin:20px 20px">
                    <button id="onoff" class="btn btn-primary" style="float:left">加载/关停</button><br />
                </div>
                <div class="checkboxlist col-sm-9" style="display:none;margin-left:40px;">
                    <div class="tiaojie input1">
                        <input type="checkbox" id="eletime" />阶梯电价定时模块&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="tiaojie input1">
                        <input type="checkbox" id="change" />根据载荷改变冲程模块&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="tiaojie input1">
                        <input type="checkbox" id="slowdown" />缓下模块
                    </div>
                </div>
                <div class="widget col-sm-12" id="list" style="overflow:auto; height:480px;">
                    <div class="eletime panel panel-primary" style=" margin: 15px 20px;display:block">
                        <div class="panel-heading" style="padding:5px 15px">
                            <h1 class="panel-title" style="font-size:16px;margin-bottom:0px">阶梯电价定时模块</h1>
                        </div>
                        <div class="panel-body" style="padding:5px 15px;height:140px">
                            <label style="float:left;width:25%;margin-top:20px;height:120px">请选择<b>低</b>电价时段以便优化生产成本：</label>
                            <div class="span8 col-sm-12" style="float: left; width: 35%; height: 60px;  display: block">
                                <div id="ionrange_time">
                                </div>
                            </div>
                            <div class="span8" style="float: left; width: 30%; height: 60px; margin-left: 2%; display: block;padding-top:15px">
                                改变冲次为：<input />次/分
                            </div>
                            <button class="btn btn-primary" style="margin-right: 10%; padding: 3px 12px; float: right; width: 20%; margin-top: 20px;min-width:200px" onclick="getTime()">保存选择并在该时段加大冲次</button>
                        </div>
                    </div>
                    <div class="change panel panel-primary" style="display:none;margin:15px 20px">
                        <div class="panel-heading" style="padding:5px 15px">
                            <h1 class="panel-title" style="font-size:16px;margin-bottom:0px">根据载荷改变冲程模块</h1>
                        </div>
                        <div class="panel-body" style="padding:5px 15px">
                            <div class="control-group">
                                <div class="controls">
                                    <div class="slider-controls">
                                        载荷/冲程比：载荷<input />/冲程<input />
                                        <button class="btn btn-primary" style="margin-left:20px;padding:3px 12px">调节冲程</button>
                                    </div>
                                    <div id="range-slider1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slowdown panel panel-primary" style="display: none; margin: 15px 20px">
                        <div class="panel-heading" style="padding:5px 15px">
                            <h1 class="panel-title" style="font-size:16px;margin-bottom:0px">缓下模块</h1>
                        </div>
                        <div class="panel-body" style="padding:5px 15px">
                            <div class="control-group">
                                <div class="controls">
                                    <div class="slider-controls">
                                        上行/下行速率比：上行<input />/下行<input />
                                        <button class="btn btn-primary" style="margin-left:20px;padding:3px 12px">调节速率</button>
                                    </div>
                                    <div id="range-slider1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/Content/plugins/ionRangeSlider/ionRangeStyles")
    @Styles.Render("~/plugins/c3Styles")
    @Styles.Render("~/plugins/sweetAlertStyles")
    <style type="text/css">
        .tiaojie {
            width: 20%;
            height: 50px;
            margin-top:20px;
            margin-bottom: 10px;
            float: left;
        }
        .jiange {
            clear: both;
        }

        .input1 {
            padding-top: 10px;
        }
    </style>
}

@section Scripts {
    @Scripts.Render("~/plugins/ionRange")
    @Scripts.Render("~/plugins/c3")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        function checkbox() {
            $('input:checkbox').on('change', function () {
                var z = '';
                $('input:checkbox').each(function () {
                    z = this.getAttribute('id');
                    if ($(this).is(':checked')) {
                        $("." + z).show();
                    }
                    else { $("." + z).hide(); }
                });
            })
        }
        $(function () {
            $(".eletime").show();
            $("button").on("click", function (event) {
                var target = $(event.target);
                if (target.is("#onoff")) {
                    $(".checkboxlist").toggle();
                    checkbox();
                }
            });
            var time = new Array();
            for (var i = 0; i < 25;i++) {
                time[i] = new Object();
                time[i] = i+":00";
            }
            $("#ionrange_time").ionRangeSlider({
                values:time,
                type: 'double',
                prettify: false,
                hide_from_to:true,
                hasGrid: true,
            });
            $(".eletime").hide();
        });
        function getTime() {
            var t = $("#ionrange_time").attr('value');
            var t1 = t.split(';');
            var time1 = (parseInt(t1[0])) + ":00";
            var time2 = (parseInt(t1[1])) + ":00";
            swal({
                title: "Welcome in Alerts!",
                text: "Time is:" + time1 + "to." + time2);
            });
        }
        //$("#ionrange_time").ionRangeSlider({
        //    min: 0,
        //    max: 5000,
        //    type: 'double',
        //    prefix: "$",
        //    maxPostfix: "+",
        //    prettify: false,
        //    hasGrid: true
        //});
    </script>
}
